<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <script type="text/javascript" src="../static/jquery-easyui-1.5.5/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.5.5/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.5.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../static/toastr/toastr.min.css">
    <script type="text/javascript" src="../static/jquery-easyui-1.5.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../static/jquery-easyui-1.5.5/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../static/js/book/manage.js"></script>
    <script type="text/javascript" src="../static/js/custom.js"></script>
    <script type="text/javascript" src="../static/toastr/toastr.min.js"></script>
<title>图书管理</title>

</head>
<body style="margin: 0;">

<div style="padding: 10px;height: 100%;">
    <table id="xtable"></table>  
</div>
<script type="text/javascript">

	function dimgloadwin(img){  
	    var simg =  img;
	    var $dahuikuimg = $('<div id=dahuikuimg></div>');
	    $dahuikuimg.appendTo('body');
	    $('#dahuikuimg').dialog({  
	        title: '预览',
	        width: 300,
	        resizable:true,  
	        closed: false,  
	        cache: false,  
	        modal: true,
	        draggable: false
	    });
	    var $simg = $("<img src='' id='simg''>");
	    $simg.appendTo('#dahuikuimg');
	    $("#simg").attr("src",simg);
	};
	var h = document.documentElement.clientHeight || document.body.clientHeight;
	$(function() {
		$('#xtable').datagrid({
			/* 指明哪一个字段是标识字段 */
			idField: 'id',
			/* 标题文字 */
			title: '图书管理',
			/* 使列自动展开/收缩到合适的DataGrid宽度 */
	        // fitColumns: true,
	        /* 是否显示斑马线效果 */
	        striped: true,
	        /* 在从远程站点加载数据的时候显示提示消息 */
	        loadMsg: '正在加载数据',
	        /* 一个URL从远程站点请求数据 */
	        url: 'list.do',
	        /* 如果为true，则在DataGrid控件底部显示分页工具栏 */
	        pagination: true,
	        /* 如果为true，则显示一个行号列 */
	        rownumbers: true,
	        /* 如果为true，则只允许选择一行 */
	        singleSelect: true,
	        fitColumns: true,
	        //fit: true,
	        height:h-29,
	        method: 'POST',
	        pageSize: 10,
	        pageList: [5,10,25,50,100],
	        sortName: 'id',
	        sortOrder: 'asc',
	        /* 冻结列 */
	        frozenColumns: [ [
	            {field: 'isbn', title: 'ISBN', width: 130}
	        ] ],
	        columns: [ [
	        	{field: 'id', title: 'ID', sortable:true, order: 'asc', hidden: true},
	        	/* {field: 'isbn', title: 'ISBN', width: 130}, */
	        	{field: 'name', title: '书名', width: 250},
	        	{field: 'author', title: '作者', width: 120},
	        	{field: 'publisher', title: '出版社', width: 120},
	        	{field: 'pubdate', title: '出版日期', width: 80},
	        	{field: 'price', title: '定价', width: 60},
	        	{field: 'total', title: '总数', width: 60},
	        	{field: 'lend', title: '剩余库存', width: 60, formatter: celSur},
	        	{field: 'smallimage', title: '图片', align: 'center', formatter: imgFormatter}
	        ] ],
	        /* 当图书剩余数量不足时换背景色 */
            rowStyler: function(index,row){
            	/* 计算剩余库存 */
                if (row.total - row.lend <= 0){
                    return 'background-color: #6293BB; color: #fff; font-weight: bold;';
                }
            },
            dialog: {
            	create: {
            		title: '图书入库',
            		width: 300,
            		/* height: 180, */
            		buttons:[{
            			text: '添加',
            			iconCls: 'icon-save',
            			handler: function() {
            				$this=$(this);
            				/* 禁用按键 */
            				
            				var $dialog=$.dialog.me(this);
                            var $form=$.dialog.getForm(this);
                            if($form.form('validate')) {
	            				$this.linkbutton('disable');
                            }
            	            var $dialog=$.dialog.me(this);
                            var $form=$.dialog.getForm(this);
                            var $table=$.dialog.me(this).dialog('options').grid;
                            var $action=$dialog.dialog('options').action;
                            //var fd= new FormData($form[0]);
                            var fd= new FormData($form[0]);
                            var fd2= $($form).serialize();
                            console.log(fd);
                            if($form.form('validate')){
                                $.ajax({
                                    url: $action?$action:'check?',
                                    cache: false ,
                                    type : 'post',
                                    data : fd ,
                                    dataType : 'json' ,
                                    processData: false,
                                    contentType: false,
                                    success : function(result){
                                    	/** 图书不在数据库 **/
                                        if(result.success){
                                            // var $grid=$('#dialog').parents().children();
                                            // console.log($('#dialog').parents().children());
                                            var $dialog=$('<div id=adialog />');
                                            $dialog.appendTo('body');
                                            // var $options=$grid.datagrid('options');
                                            var $param={
                                                    title : '图书入库'  ,
                                                    width : 400 ,
                                                    href : 'info?'+fd2,

                                                    modal: true,
                                                    // grid : $grid,
                                                    onClose : function(){
                                                        $dialog.dialog('destroy');
                                                    }, 
                                                    buttons:[{
                                                        text:'保存',
                                                        iconCls:'icon-save',
                                                        handler: function(){
                                                            $this=$(this);
                                                            $this.linkbutton('disable');
                                                            var $dialog=$.dialog.me(this);
                                                            var $form=$.dialog.getForm(this);
                                                            // var $table=$.dialog.me(this).dialog('options').grid;
                                                            var $action=$dialog.dialog('options').action;
                                                            var fd= new FormData($form[0]);
                                                            if($form.form('validate')){
                                                                $.ajax({
                                                                    url: $action?$action:'edit',
                                                                    cache: false ,
                                                                    type : 'post',
                                                                    data : fd ,
                                                                    dataType : 'json' ,
                                                                    processData: false,
                                                                    contentType: false,
                                                                    success : function(result){
                                                                        if(result.success){
                                                                            /* $.messager.show({
                                                                                title: '提示'  ,
                                                                                msg : result.msg ,
                                                                                icon : 'info' 
                                                                            }); */
                                                                            toastr.success(result.msg);
                                                                            $dialog.dialog('close');
                                                                            $('#dialog').dialog('close');
                                                                            if($table.data('treegrid')){
                                                                                $table.treegrid('reload');
                                                                            }else{
                                                                                $table.datagrid('reload');
                                                                            }
                                                                        }else{
                                                                            $.messager.alert({
                                                                                title: '提示'  ,
                                                                                msg : result.msg ,
                                                                                icon : 'error'
                                                                            });
                                                                        }
                                                                    }
                                                                });
                                                            }else{
                                                                $this.linkbutton('enable');
                                                            }
                                                        } },
                                                    	{
                                                        text:'关闭',
                                                        iconCls:'icon-cancel',
                                                        handler: function(){
                                                            $.dialog.me(this).dialog('close');
                                                            $this.linkbutton('enable');
                                                        }
                                                    } ]
                                                };
                                            $dialog.dialog($param);

                                            /* toastr.success(result.msg);
                                            $dialog.dialog('close');
                                            if($table.data('treegrid')){
                                                $table.treegrid('reload');
                                            }else{
                                                $table.datagrid('reload');
                                            } */
                                        }else{
                                            $.messager.alert({
                                                title: '提示'  ,
                                                msg : result.msg ,
                                                icon : 'error'
                                            });
                                            $this.linkbutton('enable');
                                        }
                                    }
                                });
                            }
						}
            		},$.dialog.buttons.reset,$.dialog.buttons.close]
            	}
            },
            toolbar: [$.crudgrid.buttons.create,'-',$.crudgrid.buttons.update,'-',$.crudgrid.buttons.delete,'-',$.crudgrid.buttons.search,'-',$.crudgrid.buttons.reload,'-']
	        
		});
	
	function imgFormatter(value,row,index){
		console.log();
		// return "<img src="+value+" title='点击查看图片'/>";
		var a = "https://ws3.sinaimg.cn/large/005BYqpggy1fxnisi5d7nj303k03k742.jpg";
		return "<img onclick=dimgloadwin(\""+value+"\") src="+value+" title='点击查看图片' style='width:55px; height:66px;margin-left:3px;'/>";
	};
	
	/* 计算图书剩余库存 */
	function celSur(value, row, index) {
		return row.total - row.lend;
	}
	
});

</script>
</body>

</html>